<template>
  <div class="mod-sys__dict">
    <el-form :inline="true" :model="dataForm" @keyup.enter="getDataList()">
      <el-form-item label="货物编码">
        <el-input v-model="dataForm.code"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary"  @click="getDataList()">查找</el-button>
        <el-button type="primary" @click="submit()">确认</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="20">
      <el-col :span="11">
        <el-table v-loading="dataListLoading"
                  ref="locationTable"
                  :data="dataList" border @selection-change="handleChange" @sort-change="dataListSortChangeHandle" style="width: 100%">
          <el-table-column type="selection" header-align="center" align="center" width="50" ></el-table-column>
          <el-table-column prop="code" label="货物编码" header-align="center" align="center"></el-table-column>
          <el-table-column prop="segmentNo" label="密集架" header-align="center" align="center"></el-table-column>
        </el-table>
        <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total" layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle" @current-change="myPageCurrentChangeHandle"> </el-pagination>
      </el-col>
      <el-col :span="2" style="text-align:center;">
        <el-button
          @click="addLocation"
          type="primary"
          :disabled="!dataList.length"
          icon="el-icon-arrow-right"
          circle
        ></el-button>
        <el-button
          @click="removeStaff"
          type="primary"
          :disabled="!selectedLocationData.length"
          icon="el-icon-arrow-left"
          circle
          style="margin-left: 0;margin-top: 10px;"
        ></el-button>
      </el-col>
      <el-col :span="11">
        <el-table
          ref="locationSelectedTable"
          v-loading="dataListLoading" :data="selectedLocationList" border @selection-change="handleSelectedStaffChange"  style="width: 100%">
          <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
          <el-table-column prop="code" label="货物编码" header-align="center" align="center"></el-table-column>
          <el-table-column prop="segmentNo" label="密集架" header-align="center" align="center"></el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts">
import useView from "@/hooks/useView";
import { defineComponent, reactive, toRefs } from "vue";
import baseService from "@/service/baseService";
export default defineComponent({
  props: { propsData: Object},
  setup() {
    const state = reactive({
      createdIsNeed: false,
      getDataListIsPage: true,
      getDataListURL: "/archive/warehouse-location/page",
      locationIds:[],
      dataForm: {
        code: "",
        warehouseId:""
      },
      staffList: [],
      selectedLocationList: [],
      locationData: [],
      selectedLocationData: [],
      tableKey: 0,
      tableSelectList:[]
    });
    return { ...useView(state), ...toRefs(state) };
  },

  created() {
    this.locationIds.push(this.propsData.locationIds)
    this.dataForm.warehouseId = this.propsData.warehouseId as string;
    this.selectedLocationList = this.propsData.locationIds
    this.tableSelectList = this.propsData.locationIds
    this.myPageCurrentChangeHandle(this.page)

  },
  methods: {
    getLocationList() {
      baseService.get(`/archive/warehouse-location/page`,{warehouseId:this.propsData.warehouseId}).then((res) => {
        if (res.code !== 0) {
          return this.$message.error(res.msg);
        }
      });
    },

    handleChange(rows) {
      this.tableSelectList = this.tableSelectList.concat(rows)
      this.locationData = [];
      if (rows) {
        rows.forEach(row => {
          if (row) {
            this.locationData.push(row);
          }
        });
      }
    },
    addLocation() {
      setTimeout(() => {
        this.$refs["locationSelectedTable"].clearSelection();
      }, 0);
      debugger
      if(this.selectedLocationList.length <= 0) {
        this.locationData.forEach(item => {
          this.selectedLocationList.push(item);
        });
      } else {
        let filterList=this.locationData.filter(l=>{
          return this.selectedLocationList.findIndex(d=>d.id===l.id)==-1;
        });
        this.selectedLocationList =  this.selectedLocationList.concat(filterList)
      }


    },
    removeStaff() {
      setTimeout(() => {
        this.$refs["locationSelectedTable"].clearSelection();
      }, 0);

      let filterList=this.tableSelectList.filter(l=>{
        return this.selectedLocationData.findIndex(d=>d.id===l.id)==-1;
      });
      this.tableSelectList = filterList;
      this.myPageCurrentChangeHandle(this.page)
      for (let i = 0; i < this.selectedLocationList.length; i++) {
        for (let j = 0; j < this.selectedLocationData.length; j++) {
          if (
            this.selectedLocationList[i] &&
            this.selectedLocationData[j] &&
            this.selectedLocationData[i].id === this.selectedLocationData[j].id
          ) {
            this.selectedLocationList.splice(i, 1);
          }
        }
      }
    },

    handleSelectedStaffChange(rows) {
      this.selectedLocationData = [];
      if (rows) {
        rows.forEach(row => {
          if (row) {
            this.selectedLocationData.push(row);
          }
        });
      }
    },
    tableDefaultSelect(){
      let arr = []
      this.dataList.map((item) => {
        this.tableSelectList.map((it) => {
          if(item.id == it.id){
            arr.push(item)
            return
          }
        })
      })
      console.log("this.arr",arr)
      arr.map((item) => {
        this.$refs.locationTable.toggleRowSelection(item,true);
      })
    },

    submit(){
      this.$emit('getLocationList',this.selectedLocationList.map(item=>item.id))
    },
    // 分页, 当前页
    myPageCurrentChangeHandle(val: number) {
      this.page = val;
      this.query().then(() => {
        this.tableDefaultSelect()
      });
    },
    query() {
      if (!this.getDataListURL) {
        return;
      }
      this.dataListLoading = true;
      return baseService
        .get(this.getDataListURL, {
          order: this.order,
          orderField: this.orderField,
          page: this.getDataListIsPage ? this.page : null,
          limit: this.getDataListIsPage ? this.limit : null,
          ...this.dataForm
        })
        .then((res) => {
          this.dataListLoading = false;
          if (res.code !== 0) {
            this.dataList = [];
            this.total = 0;
            return ""
          }
          this.dataList = this.getDataListIsPage ? res.data.list : res.data;
          this.total = this.getDataListIsPage ? res.data.total : 0;
        })
        .catch(() => {
          this.dataListLoading = false;
        });
    },
  }});
</script>
